import React, { useEffect } from 'react'
import routerConfig from './router/index'
import { useRoutes, useLocation } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { getUserInfoAction } from './store/models/user'
import type { AppDispatch, RootState } from './store'
import { Spin } from 'antd'

const App: React.FC = () => {
  const location = useLocation()
  const dispatch: AppDispatch = useDispatch()
  const loading = useSelector((state: RootState) => state.user.userLoading)
  const routes = useRoutes(routerConfig)

  useEffect(() => {
    if (location.pathname !== '/user/login') {
      dispatch(getUserInfoAction())
    }
  }, [])

  return (
    <Spin size="large" spinning={loading}>
      <div style={{ width: '100vw', minHeight: '100vh' }}>
        {routes}
      </div>
    </Spin>
  )
}

export default App